<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>joinUs</title>
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="shortcut icon" href="../favicon.png" type="image/x-icon" />

    <script src="../icons/iconfont.js"></script>
    <link rel="stylesheet" href="../icons/iconfont.css" />
    <script defer type="module" src="../js/script/controller.js"></script>
  </head>
  <body>
    <main class="recruit">
      <section class="section-header">
        <div class="recruit-header">
          <div class="recruit-header__text">
            <h1 class="heading__special u-left-text">
              <span class="heading__special--main u-margin-bottom-medium">
                JOIN US
              </span>
            </h1>
            <div class="recruit-header__logo">
              <img
                src="../imgs/701Logo_frameless.png"
                alt="701Logo"
              />
            </div>
            <p class="recruit-header__sentence">
              当真正想清楚自己想要什么的时候，才是自己需要做出义无反顾选择的时刻。
              <span class="sentence--comments"> 18级计科 高雅 </span>
            </p>
          </div>
        </div>
      </section>
      <section class="section-form">
        <form class="form" onsubmit="return false" action="#">
          <div class="flex__row">
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-yonghu"></i>
              </div>
              <div class="input__item">
                <label for="name" class="input__lable"> 姓名 </label>
                <input
                  type="text"
                  class="input__input"
                  id="name"
                  name="name"
                  placeholder="Your name"
                  pattern="^[^0-9\s]{2,15}$"
                  required
                />
              </div>
            </div>
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-shenfen"></i>
              </div>
              <div class="input__item">
                <label for="studentID" class="input__lable"> 学号 </label>
                <input
                  type="text"
                  id="studentID"
                  name="studentID"
                  class="input__input"
                  placeholder="Your Student ID"
                  required
                />
              </div>
            </div>
          </div>
          <div class="flex__row">
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-dianhua"></i>
              </div>
              <div class="input__item">
                <label for="phone" class="input__lable"> 电话 </label>
                <input
                  type="tel"
                  id="phone"
                  name="phone"
                  class="input__input"
                  placeholder="Your Tele Number"
                  pattern="^[1][3,4,5,6,7,8,9][0-9]{9}$"
                  required
                />
              </div>
            </div>
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-leimu"></i>
              </div>
              <div class="input__item">
                <label for="majority" class="input__lable"> 专业 </label>
                <select name="majority" id="majority" class="input__select">
                  <option default value="1">
                    计算机科学与技术
                  </option>
                  <option value="2">数据科学与大数据</option>
                  <option value="3">软件工程</option>
                  <option value="4">教育技术学</option>
                </select>
              </div>
            </div>
          </div>
          <div class="flex__row">
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-youxiang"></i>
              </div>
              <div class="input__item">
                <label for="email" class="input__lable"> 邮箱 </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  class="input__input"
                  placeholder="Your Tele Number"
                  pattern=""
                  required
                />
              </div>
            </div>
            <div class="form__group">
              <div class="input__icon">
                <i class="iconfont icon-nianji"></i>
              </div>
              <div class="input__item">
                <label for="grade" class="input__lable"> 年级 </label>
                <select name="grade" id="grade" class="input__select">
                  <option default value="2021">
                    2021级
                  </option>
                  <option  value="2022">2022级</option>
                  <option value="2023">2023级</option>
                </select>
              </div>
            </div>
          </div>
          <div class="flex__row">
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-liuyan"></i>
              </div>
              <div class="input__item">
                <label for="experience" class="input__lable">
                  相关编程经历
                </label>
                <textarea
                  id="experience"
                  name="experience"
                  class="input__textarea"
                  placeholder="从此处开始（大一新生若没有编程经验请填无）"
                  rows="8"
                  required
                ></textarea>
              </div>
            </div>
          </div>
          <div class="flex__row">
            <div class="form__group">
              <div class="input__icon">
                <i class=" iconfont icon-liuyan"></i>
              </div>
              <div class="input__item">
                <label for="plan" class="input__lable">
                  请向我们简要描述你对本学年的学习规划
                </label>
                <textarea
                  name="plan"
                  id="plan"
                  class="input__textarea"
                  placeholder="从此处开始（粗略地描述即可）"
                  rows="8"
                  required
                ></textarea>
              </div>
            </div>
          </div>
          <div class="flex__row">
            <div class="form__group">
              <div class="input__item input-submit flex__row">
                <label for="" class="input-submit__label"> &rarr; </label>
                <input
                  type="button"
                  class="input-submit__button"
                  value="提交"
                />
           
              </div>
            </div>
          </div>
        </form>
      </section>  
      <div class="notice notice--submit hidden">
        <div class="notice__description">
          <p class="notice__icon">
            <i class="iconfont icon-Cool"></i>
        </p>
          <p class="notice__msg"></p>
          </p>
        </div>
      </div>
    </main>
    <footer class="recruit__footer">
      <div class="flex__row ending u-margin-bottom-medium">
        <div class="footer__left">
          <div class="footer__logo">
            <img src="../imgs/701Logo_frameless.png" alt="701Logo" />
          </div>
        </div>
        <div class="footer__right">
          <div class="contact">
            <div class="contact__title">联系我们</div>
            <div class="contact__item flex__row">
              <div class="contact__icon">
                <i class=" iconfont icon-minus"></i>
              </div>
              <div class="contact_description">
                <p class="contact__item--title">联系人</p>
                <p class="contact__item--content">19382982393</p>
              </div>
            </div>
            <div class="contact__item flex__row">
              <div class="contact__icon">
                <i class=" iconfont icon-minus"></i>
              </div>
              <div class="contact_description">
                <p class="contact__item--title">QQ招新群</p>
                <p class="contact__item--content">832849048</p>
              </div>
            </div>
            <div class="contact__item flex__row">
              <div class="contact__icon">
                <i class=" iconfont icon-minus"></i>
              </div>
              <div class="contact_description">
                <p class="contact__item--title">地址</p>
                <p class="contact__item--content">
                  南京特殊教育师范学院<br />
                  栖霞校区<br />
                  实验楼7层701<br />
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <div class="notice notice--state hidden">
      <div class="state">
        <div class="state__panel">
          <h3 class="heading__tertiary u-margin-bottom-medium">
            <span class="heading__tertiary--main  state--welcome">你好，王小明</span>
            <span class="heading__tertiary--sub">我们已经收到了你的报名表啦~</span>
          </h3>
          <p class="state__description u-margin-bottom-medium">
            我们会在1-3个工作日内对报名表进行筛选，<br/>
            请加入我们的交流群以获取最新消息。<br/>
            QQ群号：1234567890
           </p>
          <p class="state__link"><a href="recruit.html" class="btn btn--text">我想重新提交</a></p>
          <span class="state__close-modal">x</span>
        </div>
      </div>
    </div>
    <div class="overlay hidden">
    </div>
  </body>
</html>
